<template>
    <div class="content-main">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>报告模板设置</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- <bread-crumb-back></bread-crumb-back> -->
        </div>
        <div class="content-box">
            <div class="editor-box">
                <!-- <div class="editor-title">
                    <img src="./../../assets/images/editor_icon.png" />
                    实验报告详情
                </div> -->
                <!-- <vue-editor style="margin-top:40px;" v-model="htmlForEditor"></vue-editor> -->
                <div id="report-editor" style="margin-top:40px;">
                    <div id="report-editor-menu" style="line-height:24px;"></div>
                    <div id="report-editor-editor" style="width:auto; height:500px;"></div>
                    <input type="hidden" v-model="htmlForEditorContent" id="report-editor-text" />
                </div>
                <div class="editor-btn-box" style="text-align:center; margin-top:20px;">
                    <el-button type="primary"  @click="saveFn">保存</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import BreadCrumbBack from '@/components/breadCrumbBack.vue'
    // import { VueEditor } from 'vue2-editor'
    import E from 'wangeditor'
    export default {
        components: {
            // VueEditor,
            BreadCrumbBack
        },
        data () {
            return {
                htmlForEditor: null,
                htmlForEditorContent: '',
                htmlId: '',
                editorMenus: [
                    'head',  // 标题
                    'bold',  // 粗体
                    'fontSize',  // 字号
                    'fontName',  // 字体
                    'italic',  // 斜体
                    'underline',  // 下划线
                    'strikeThrough',  // 删除线
                    'foreColor',  // 文字颜色
                    'backColor',  // 背景颜色
                    'link',  // 插入链接
                    'list',  // 列表
                    'justify',  // 对齐方式
                    'quote',  // 引用
                    'image',  // 插入图片
                    'table',  // 表格
                    'code',  // 插入代码
                ]
            }
        },
        created () {
            this.init() //初始化
        },
        methods: {
            init() {
                let self = this
                self.$http.post('/dataplatform/system/manager/getModel').then((response) => {
                    let res = response.data
                    if(res.code == '200'){
                        if(res.data == undefined) return
                        if(res.data.length != ''){
                            self.htmlForEditorContent = res.data.reportModelMsg
                            self.htmlId = res.data.id
                        }
                        self.$nextTick(() => {
                            self.reportCatchData()
                        })
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            reportCatchData(){
                this.htmlForEditor = new E('#report-editor-menu', '#report-editor-editor')
                this.htmlForEditor.customConfig.onchange = (html) => {
                    this.htmlForEditorContent = html
                }
                this.htmlForEditor.customConfig.zIndex = 100
                this.htmlForEditor.customConfig.uploadImgShowBase64 = true
                this.htmlForEditor.customConfig.menus = this.editorMenus
                this.htmlForEditor.create()     // 创建富文本实例
                this.htmlForEditor.txt.html(this.htmlForEditorContent)
            },
            //保存
            saveFn(){
                let self = this
                self.$http.post('/dataplatform/system/manager/saveModel',{
                    id: self.htmlId == '' ? null : self.htmlId,
                    reportModelMsg: self.htmlForEditorContent
                }).then((response) => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            }
        }
    }
</script>
